<template>
<div>
    <van-nav-bar :fixe="true" :placeholder="true" title="我的信息" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-row style="text-align: center;">
        <van-row style="text-align: center;">
            <van-image round width="10rem" height="10rem" :src="user.picPath" />
        </van-row>
        <van-row style="text-align: center;">
            <van-uploader :after-read="afterRead">
                <van-button :after-read="afterRead" accept='image/*' size="small" icon="photo" type="info">选择头像</van-button>
            </van-uploader>
        </van-row>
        <p>{{userName}},欢迎您！</p>
    </van-row>

    <van-card>
        <template #tags>
            <div>
                <van-cell title="姓名：" :value=userName />
                <van-cell title="参加工作时间：" :value=workDate />
                <van-cell title="试用期/已转正" :value=isProbation />
                <van-cell title="结婚时间：" :value=marryDate />
                <van-cell title="出生日期：" :value=birthday />
                <van-cell title="涉密等级：" :value=secretLevelText />
            </div>
        </template>
    </van-card>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/bl">办理</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/indexxj">新建</van-tabbar-item>
        <van-tabbar-item icon="manager-o" to="/wode">我的</van-tabbar-item>

    </van-tabbar>
</div>
</template>

<script>
import Vue from "vue";
import Cookies from "js-cookie";
import {
    Uploader
} from 'vant';
import {
    Dialog
} from "vant";
Vue.use(Uploader);
import {
    Lazyload
} from "vant";
Vue.use(Lazyload);
export default {
    data() {
        return {
            active: '',
            userId: "",
            userName: "",
            organizationName: "",
            workYear: "",
            workDate: '',
            secretLevelText: '',
            isProbation: '',
            marryDate: '',
            birthday: '',
            user: {}

        };
    },
    created() {
        this.active = 4
        this.userId = Cookies.get("userId");
        this.userName = Cookies.get("userName");
        this.workYear = "工龄" + Cookies.get("workYear") + "年";
        //参加工作日期
        this.workDate = Cookies.get("workDate").slice(0, 11);
        //涉密等级
        this.secretLevelText = Cookies.get("secretLevelText");
        //是否转正 1是 0否
        this.isProbation = Cookies.get("isProbation") == 1 ? '是' : '否';
        //结婚日期
        this.marryDate = Cookies.get("marryDate").slice(0, 11);
        //出生日期
        this.birthday = Cookies.get("birthday").slice(0, 11);

        this.user = this.$store.state.user;

    },
    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            //确认销假
            // const b = {
            //     file: file1,
            //     userId: Cookies.get('userId')
            // };
            let content = file.file;
            let data = new FormData();
            data.append('file', content);
            data.append('userId', Cookies.get('userId'));

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'user/uploadImg',
                data: data
            }).then((response) => { //这里使用了ES6的语法
                if (response.data.code == '200') {

                     this.$store.state.user.picPath = window.sessionStorage.getItem('baseURL') + response.data.data.picPath;
                     window.sessionStorage.setItem('URL',window.sessionStorage.getItem('baseURL') + response.data.data.picPath) 
                    // this.user.picPath = window.sessionStorage.getItem('baseURL') + response.data.data.picPath
                    // this.user.picPath = sessionStorage.getItem('baseURL') + this.user.picPath;
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg

                    }).then(() => {
                        // window.location.reload();
                    });

                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-0); //返回上一层
                    });
                }

            })

            // this.$axios.post('user/uploadImg', data)
            //     .then((response) => {
            //         if (response.data.code == '200') {
            //             this.$store.state.user.picPath = response.data.data.picPath;
            //             this.user.picPath = response.data.data.picPath

            //             Dialog.alert({
            //                 title: "成功",
            //                 message: response.data.msg

            //             }).then(() => {
            //                 // window.location.reload();
            //             });

            //         } else {
            //             Dialog.alert({
            //                 title: "错误",
            //                 message: response.data.msg
            //             }).then(() => {
            //                 this.$router.go(-0); //返回上一层
            //             });
            //         }
            //     })

            // this.$axios({
            //     headers: {
            //         'Content-Type': 'application/x-www-form-urlencoded'
            //     },
            //     method: 'post',
            //     url: "user/uploadImg",
            //     data: data
            //     // data: this.zhuanfunction(b)
            // }).then((response) => { //这里使用了ES6的语法
            //     console.log(response) //请求成功返回的数据
            //     // alert(response.data.data.total)
            //     alert(666)
            // })

            //  this.$axios({
            //     headers: {
            //                 "Content-Type": "application/json;charset=UTF-8"
            //             },
            //     method: 'post',
            //     url: "user/uploadImg",
            //     data: this.transformRequest(b)
            // }).then((response) => { //这里使用了ES6的语法
            //     console.log(response) //请求成功返回的数据
            //     // alert(response.data.data.total)
            //     alert(666)
            // })
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        transformRequest(data) {
            data = JSON.stringify(data)
            return data
        },
    }
};
</script>

<style>
.aaaF .van-cell:not(:last-child)::after {
    border-bottom: none !important;
    padding-left: 20px !important;
}
</style>
